<template>
    <div class="excel">
        <table class="gridtable" border="1">
            <thead>
                <tr class="title">
                    <td style="width:3rem" class="title-td">序号</td>
                    <td style="width:4rem" class="title-td">区市县</td>
                    <td style="width:5rem" class="title-td">街道</td>
                    <td style="width:5rem" class="title-td">社区</td>
                    <td style="width:5rem" class="title-td">采样点名称</td>
                    <td style="width:10rem" class="title-td">采样点地址</td>
                    <td style="width:8rem" class="title-td">开放时间</td>
                    <td style="width:6rem" class="title-td">采样点负责人</td>
                    <td style="width:7rem" class="title-td">联系电话</td>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr v-for="(item, index) in results" :key="index">
                    <td style="width:3rem" class="body-td">{{ index + 1 }}</td>
                    <td style="width:4rem" class="body-td">{{ item.district }}</td>
                    <td style="width:5rem" class="body-td">{{ item.street }}</td>
                    <td style="width:5rem" class="body-td">{{ item.community }}</td>
                    <td style="width:5rem" class="body-td">{{ item.name }}</td>
                    <td style="width:10rem" class="body-td">{{ item.adderss }}</td>
                    <td style="width:8rem" class="body-td">{{ item.time }}</td>
                    <td style="width:6rem" class="body-td">{{ item.people }}</td>
                    <td style="width:7rem" class="body-td">{{ item.tell }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
const Excel = require("./excel.json");
export default {
    data() {
        return {
            results: Excel
        }
    },
    mounted() {
    },
    methods: {

    }
}

</script>
<style lang="less" scoped>
td,
th {
    padding: 0;
    margin: 0;
}

.excel {
    table.gridtable {
        border-collapse: collapse;
        table-layout: fixed;
        width: 53.5rem;

        .title-td,
        .body-td {
            text-align: center;
        }

        thead {
            .title {
                display: block;

                .title-td {
                    font-weight: 600;
                }
            }
        }

        tbody {
            overflow: auto;
            display: block;
            width: 100%;
            height: 33rem;

            tr {
                display: block;
            }
        }
    }
}
</style>
